<script setup lang="ts">
import { DeleteOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

import { link1688stor } from '#/store';

import SupplyInfo from './supplyInfo.vue';
import Uselinkbox from './uselinkbox.vue';

const link1688 = link1688stor();

const { bindGoodsList } = storeToRefs(link1688);

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 60,
    align: 'center',
  },
  {
    title: '货源信息',
    dataIndex: 'huoyuanInfo',
    key: 'huoyuanInfo',
    width: 270,
  },
  // {
  //   title: '密文下单',
  //   dataIndex: 'miwenbuy',
  //   key: 'miwenbuy',
  // },
  {
    title: '关联时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    width: 150,
  },
  {
    title: '规格匹配状态',
    dataIndex: 'linkskuStatus',
    key: 'linkskuStatus',
    align: 'center',
    width: 150,
  },
  {
    title: '货源备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 60,
    align: 'center',
  },
];
function delbind1688item(params: any) {
  link1688.dlt1688bindItem(params);
}
</script>

<template>
  <div class="mt-6">
    <a-table
      :columns="columns"
      :data-source="bindGoodsList"
      :pagination="false"
      bordered
      size="small"
    >
      <template #title> <Uselinkbox /> </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <a-button
            :loading="record.deleteLodin"
            danger
            size="small"
            type="link"
            @click="() => delbind1688item(record)"
          >
            <template #icon>
              <DeleteOutlined />
            </template>
          </a-button>
        </template>
        <template v-if="column.dataIndex === 'huoyuanInfo'">
          <SupplyInfo :item-data="record" />
        </template>
        <template v-if="column.dataIndex === 'remark'">
          <a-input v-model:value="record.remark" size="small" />
        </template>
        <template v-if="column.dataIndex === 'linkskuStatus'">
          <a-tag :color="record.skuMatchCount > 0 ? 'green' : 'red'">
            {{ record.skuMatchCount > 0 ? '已匹配' : '未匹配' }}
          </a-tag>
          <div v-if="record.skuMatchCount > 0">
            <span style="color: green">
              {{ record.skuMatchCount }}
            </span>
            /
            <span>
              {{ record.skuTotal }}
            </span>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
